<template>
  <u-navbar
    title="我的合成"
    back-icon-color="#fff"
    :background="{ background: '#111723' }"
    title-color="#fff"
    :title-bold="true"
    :border-bottom="false"
  >
  </u-navbar>
  <scroll-view style="height: 1420rpx" :scroll-y="true">
    <view class="qy-1">
      <view class="qy-2">
        <image :src="state.obj.collection_image" mode=""></image>
      </view>
      <view class="qy-3">
        <image src="@/static/images/taizi.png" mode=""></image>
      </view>
      <view class="qt-1">
        <view>{{ state.obj.collection_name }}</view>
      </view>
      <view class="qy-4">
        <view class="qy-5">
          <image src="@/static/images/xingfl.png" mode=""></image>
        </view>
        <view class="tip">
          <view class="tip-l">星艺藏品 </view>
          <!-- <view class="tip-r">
            <view class="tip-r-l">限量</view>
            <view class="tip-r-r">100份</view>
          </view> -->
        </view>
        <view class="qy-8">
          <image src="@/static/images/xingfr.png" mode=""></image>
        </view>
      </view>
    </view>
    <view class="hc-6">
      <view class="hc-7">合成碎片</view>
      <view class="hc-8">
        <view class="hc-9" v-for="(item, index) in state.list" :key="index">
          <view class="hc-10">
            <image :src="item.image" mode="widthFix"></image>
          </view>
          <view class="hc-11" v-if="item.is_light === 0">
            <image src="@/static/images/suoz.png" mode="widthFix"></image>
            未获得
          </view>
          <view class="hc-12">{{ item.my_count + '/' + item.need_count }}</view>
        </view>
      </view>
    </view>
    <view class="message">
      <view class="hc-7">合成详情</view>
      <view class="hc-13">
        <rich-text :nodes="state.obj.desc"></rich-text> </view></view
  ></scroll-view>
  <view class="bottom-b">
    <u-button
      :ripple="true"
      shape="circle"
      :disabled="idSyn"
      :custom-style="idSyn ? state.customStyle2 : state.customStyle"
      :throttle-time="300"
      @click="submit"
      >立即合成</u-button
    >
  </view>
  <view class="fire" v-if="state.isSuccess">
    <Fire></Fire>
  </view>
</template>
<script setup lang="ts">
import { reactive, onMounted, computed } from 'vue'
import Fire from '@/components/Fire/index.vue'
import {
  synthesisRuleDetail,
  mySynthesisCollection,
  synthesis
} from '@/api/modules/user'
import { onLoad } from '@dcloudio/uni-app'

const state = reactive({
  customStyle: {
    backgroundImage: 'linear-gradient(to right, #7e50d7, #2138cd)',
    color: '#fff',
    width: '60%'
  },
  customStyle2: {
    background: '#9d9d9d',
    color: '#fff',
    width: '60%'
  },
  id: '',
  obj: {} as any,
  list: [] as any,
  isSuccess: false
})
onLoad((options) => {
  state.id = options.id as string
})
onMounted(() => {
  synthesisRuleDetail({ rule_id: state.id }).then((result) => {
    state.obj = result.data
    mySynthesisCollection({ rule_id: state.id }).then((result2) => {
      state.list = result2.data
    })
  })
})
//合成
const submit = () => {
  synthesis({ rule_id: state.id }).then((result) => {
    state.isSuccess = true
    uni.showToast({
      title: '合成成功'
    })
    setTimeout(() => {
      uni.navigateBack({
        delta: 1 //返回层数，2则上上页
      })
    }, 2000)
  })
}
//是否能合成
const idSyn = computed(() => {
  return state.list.some((v: any) => v.is_light === 0)
})
</script>
<style lang="less" scoped>
.fire {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.bottom-b {
  position: fixed;
  bottom: 20rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  ::v-deep(.u-hairline-border) {
    ::after {
      border: none !important;
    }
  }
}
.message {
  margin: 0 40rpx;
  border-radius: 36rpx;
  background: #231f30;
  margin-top: 41rpx;
  padding: 36rpx 26rpx;
  .hc-13 {
    font-size: 24upx;
    color: #ccc;
    margin-top: 40upx;
    margin-bottom: 30rpx;
  }
}
.hc-7 {
  text-align: center;
  font-size: 32rpx;
  color: #fff;
}
.hc-6 {
  margin: 0 40rpx;
  border-radius: 36rpx;
  background: #231f30;
  padding: 36rpx 26rpx;
  box-sizing: border-box;
  margin-top: 50rpx;
  .hc-11 {
    position: absolute;
    z-index: 10;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0 auto;
    left: 0;
    right: 0;
    font-size: 22upx;
    margin-top: 34upx;
    color: #ccc;

    image {
      user-select: none;
      pointer-events: none;
      width: 36upx;
      height: 36upx;
      display: block;
      margin-bottom: 8upx;
    }
  }

  .hc-13 {
    font-size: 24rpx;
    color: #ccc;
    margin-top: 40rpx;
    margin-bottom: 30rpx;
  }

  .hc-14 {
    width: 580rpx;
    height: 88rpx;
    text-align: center;
    background: linear-gradient(96.88895deg, #f6d58a 0%, #f6bf50 100%);
    border-radius: 47rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    color: #333333;
    margin: 0 auto;
  }

  .hc-8 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 26rpx;

    flex-wrap: wrap;

    .hc-9 {
      width: 140rpx;
      height: 140rpx;
      position: relative;
      overflow: hidden;
      border-radius: 18rpx;
      margin: 20rpx;
      .hc-10 {
        width: 140rpx;
        height: 140rpx;
        position: absolute;
        z-index: 5;

        image {
          user-select: none;
          pointer-events: none;
          width: 100%;
          display: block;
        }
      }

      .hc-11 {
        position: absolute;
        z-index: 10;
        flex-direction: column;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 0 auto;
        left: 0;
        right: 0;
        font-size: 22rpx;
        margin-top: 34rpx;
        color: #ccc;

        image {
          user-select: none;
          pointer-events: none;
          width: 36rpx;
          height: 36rpx;
          display: block;
          margin-bottom: 8rpx;
        }
      }

      .hc-12 {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        position: absolute;
        z-index: 7;
        padding: 10rpx;
      }
    }
  }
}

.qy-1 {
  width: 686rpx;
  margin: 0 auto;
  .tip {
    display: flex;
    padding-top: 18px;
    font-size: 22rpx;
    .tip-l {
      width: 120rpx;
      height: 40rpx;
      background-image: linear-gradient(to right, #8375f3, #ff3ede);
      border-radius: 10rpx;
      line-height: 40rpx;
      text-align: center;
      color: #fff;
    }
    .tip-r {
      display: flex;
      height: 40rpx;
      margin-left: 20rpx;
      width: 200rpx;
      .tip-r-l {
        width: 40%;
        background: #c63bf8;
        line-height: 40rpx;
        text-align: center;
        color: #fff;
      }
      .tip-r-r {
        flex: 1;
        background: #68637e;
        line-height: 40rpx;
        text-align: center;
        color: #fff;
      }
    }
  }

  .qy-2 {
    width: 100%;
    text-align: center;
    border-radius: 10rpx;
    overflow: hidden;
    margin-top: 30rpx;

    image {
      user-select: none;
      pointer-events: none;
      width: 368rpx;
      height: 368rpx;
    }
  }

  .qy-3 {
    width: 100%;
    text-align: center;
    border-radius: 10rpx;
    overflow: hidden;
    margin-top: 50rpx;

    image {
      user-select: none;
      pointer-events: none;
      width: 502rpx;
      height: 193rpx;
    }
  }
  .qt-1 {
    color: #fff;
    padding: 0 30rpx;
    font-size: 40rpx;
    text-align: center;
    .arrow-right {
      font-size: 30rpx;
      color: #afafaf;
    }
  }
  .qy-4 {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .qy-5 {
      width: 120rpx;
      display: block;
      text-align: right;

      image {
        user-select: none;
        pointer-events: none;
        width: 90rpx;
        height: 90rpx;
      }
    }

    .qy-8 {
      width: 120rpx;
      display: block;

      image {
        user-select: none;
        pointer-events: none;
        width: 90rpx;
        height: 90rpx;
      }
    }
  }

  .qy-9 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 22rpx;
    margin-top: 20rpx;

    image {
      user-select: none;
      pointer-events: none;
      width: 28rpx;
      height: 28rpx;
      margin-right: 10rpx;
    }
  }
}
</style>
